<template>
<view class="punchInvideoDetail">
	<video :src="detail.videofile"
		
	></video>
	<view class="punchInvideoDetail-header">
		
		<view class="punchInvideoDetail-date">
			打卡于{{formatDate(detail.createtime)}}
		</view>
		<view  class="punchInvideoDetail-tagTitle">
			病症标签
		</view>
		<view class="punchInvideoDetail-tag-list">
			<view v-for="(item,index) in tags" :key="index" class="punchInvideoDetail-tag">
				{{item}}
			</view>
		</view>
	</view>
	
	<view class="doctor-answer">
		<view class="doctor-answer-title">
			<text class="doctor-answer-title1">医生回复</text><text class="doctor-answer-title2">({{comments.length}})</text>
		</view>
		<view class="doctor-answer-list" v-for="(item,index) in comments" :key="index">
			<view class="doctor-answer-list-left">
				<image :src="item.doctor?.avatar" mode="aspectFill" />
			</view>
			<view class="doctor-answer-list-right">
				<view class="doctor-answer-list-right-title">
					<text class="doctor-answer-list-right-title1">{{item.doctor?.nickname}}</text>
					<text class="doctor-answer-list-right-title2">临床经验{{item.doctor?.workyears}}</text>
				</view>
				<view class="doctor-answer-list-right-title3">
					执业兽医师
				</view>
				<view class="doctor-answer-list-right-title4">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</view>
	<view class="bottom">
		<input type="text" v-model="replyText" placeholder="输入要回复的话..." @confirm="handleIuput" />
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs, getCurrentInstance, computed } from "vue"
import config from '@/hooks/useConfig.js'
import { onLoad } from '@dcloudio/uni-app'

export default defineComponent({
	
	setup() {
		const { prefix_image }=config()
		
		const data = reactive({
			videoId: '',
			detail: {},
			tags: [],
			comments: [],
            replyText: ''
		})
		
		const {
			appContext: {
				config: {
					globalProperties: global
				}
			}
		} = getCurrentInstance()
		// 格式化时间戳
		let formatDate = computed(() => {
			return function(time) {
				const date = new Date(time * 1000)
				const year = date.getFullYear()
				const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
				const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
				const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
				const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
				const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				return year + '年' + month + '月' + day + '日'
			}
		})
		
		onLoad((option) => {
			data.videoId = option.id
			// 获取打卡视频详情
			global.$request.post(`/v1/api/video/info/${data.videoId}`, {}).then(res => {
				if(res.code === 1) {
					data.detail = res.data
					data.tags = res.data.video_tags_name.split(',')
				}
			})
			getComments()
		})
		
		// 获取视频评论评论列表
		const getComments = () => {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			global.$request.post('/v1/api/video/comment', {
				video_id: data.videoId,
				page: 1
			}).then(res => {
				uni.hideLoading()
				if(res.code == 1) {
					data.comments = res.data.data
				}
			})
		}
		
		// 回复
		const handleIuput = (e) => {
			// 医生回复打卡视频
			global.$request.post('/v1/api/video/set/comment', {
				video_id: data.detail.id, //视频ID
				store_id: data.detail.store_id, //门店ID
				title: e.detail.value,
				content: e.detail.value
			}).then(res => {
				if(res.code === 1) {
					getComments()
					uni.showToast({
						title: '回复成功',
						icon: 'none',
						duration: 2000
					})
                    data.replyText = ''
				}
			})
		}
		
		
		return {
			...toRefs(data),
			prefix_image,
			formatDate,
			getComments,
			handleIuput
		}
	}
})
	
</script>

<style lang="stylus" scoped>
	.punchInvideoDetail{
		padding-bottom: 180rpx;
		display: flex;
		flex-direction: column;
		background: #F6F6F7;
		video{
			width: 100%;
			height: 600rpx;
		}	
		.punchInvideoDetail-header{
			display: flex;
			flex-direction: column;
			padding: 0rpx 32rpx;
			background-color: #fff;
			.punchInvideoDetail-date{
				font-size: 28rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				padding: 32rpx 0rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.09);
			}
			.punchInvideoDetail-tagTitle{
				font-size: 32rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-top: 32rpx;
				padding-bottom: 20rpx;
				
			}
			.punchInvideoDetail-tag-list{
				display: flex;
				flex-wrap: wrap;
				.punchInvideoDetail-tag{
					background: url(../../static/IntegralRecord/punchInVideoTag.png);
					background-size: 24rpx 24rpx;
					// max-width: 210rpx;
					height: 54rpx;
					background-color: rgba(0, 0, 0, 0.04);
					border-radius: 4rpx;
					background-repeat: no-repeat;
					background-position: 10rpx center;
					margin-right: 16rpx;
					padding: 8rpx 16rpx 8rpx 38rpx;
					
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					line-height: 54rpx;
					margin-bottom: 32rpx;
				}
			}
		}
		.doctor-answer{
			margin-top: 16rpx;
			background-color: #fff;
			padding: 36rpx 32rpx 0rpx 32rpx;
			.doctor-answer-title{
				padding-bottom: 32rpx;
				.doctor-answer-title1{
					font-size: 32rpx;
					// font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
				}
				.doctor-answer-title2{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
			.doctor-answer-list{
				margin-bottom: 40rpx;
				display: flex;
				.doctor-answer-list-left{
					margin-right: 16rpx;
					image{
						width: 54rpx;
						height: 54rpx;
						border-radius: 50%;
					}
				}
				.doctor-answer-list-right{
					.doctor-answer-list-right-title{
						display: flex;
						align-items: center;
						.doctor-answer-list-right-title1{
							font-size: 26rpx;
							// font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
						.doctor-answer-list-right-title2{
							// width: 124px;
							height: 26rpx;
							background: rgba(255,65,60, 0.1)
							border-radius: 4rpx;
							
							font-size: 20rpx;
							// font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF413C;
							padding: 3rpx 6rpx;
							margin-left: 12rpx;
							line-height: 26rpx;
						}
						
					}
					.doctor-answer-list-right-title3{
						margin-top: 10rpx;
						font-size: 20rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-bottom: 24rpx;
					}
					.doctor-answer-list-right-title4{
						font-size: 28rpx;
						// font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			}
		}
		
	}
	
	.bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 20rpx 0 88rpx 0;
		background-color: #fff;
		display: flex;
		/* align-items: center; */
		justify-content: center;
		width: 100%;
		box-shadow: 0rpx -1rpx 10rpx #e6e6e6;
		input{
			padding: 0 20rpx;
			width: 686rpx;
			height: 76rpx;
			background: #F2F2F2;
			border-radius: 38rpx;
			
			font-size: 28rpx;
			// font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
</style>
